import React from "react";
import ReactDOM from 'react-dom';
import ava1 from './img/P1.gif';
import ava2 from './img/P2.gif';
import ava3 from './img/P3.gif';
import ava4 from './img/P4.gif';

class Map extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mapInfo: this.props.mapInfo,
            playerInfo: this.props.playerInfo,
            currentPlayer: 0
        }
    }
    render = () => {
        return (
            <div className="map full">
                {
                    this.props.mapInfo.map((ignore, idx) => {
                        return this.renderBox(idx);
                    }, this)
                }
                {
                    this.renderBigBox()
                }
            </div>
        );
    }
    renderBox = (idx) => {
        const lst = [];
        this.props.mapInfo.forEach((lattice, idx1) => {
            if (lattice.pos === idx) {
                lst.push(
                    <h3>{lattice.name}</h3>
                );
                this.props.playerInfo.forEach((player) => {
                    if (player.pos === idx1) {
                        lst.push(
                            <img className="chr" src={player.avatar} alt=""/>
                        );
                    }
                });
            }
        });
        return (
            <div className="box">
                {lst}
            </div>
        );
    }
    renderBigBox = () => {
        let curColor = this.props.playerInfo[this.state.currentPlayer].color
        let curStyle = {
            visibility:"visible",
            background:curColor
        };
        return (
            <div className="big-box">
                <h1 className="title" style={curStyle}>{this.props.playerInfo[this.state.currentPlayer].name}</h1>
                <button className="blacknwhite" style={{zIndex:"2"}}>退出游戏</button>
                <button className="blacknwhite">规则介绍</button>
                <div className="control middle">
                    <div className="dice middle"></div>
                </div>
                {this.renderPlayerInfo()}
            </div>
        )
    }
    renderPlayerInfo = () => {
        return (
            <div className="info">
                {
                    this.state.playerInfo.map((player) => {
                        let curStyle = {
                            background:player.color
                        };
                        return (
                            <div>
                                <h3>{player.money}</h3>
                                <h2 style={curStyle}>{player.name}</h2>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

const LATTICE = [
    {name:'起点',value:2000,state:'goodEvent',owner:-1,pos:18},
    {name:'东上院',value:5000,state:0,owner:-1,pos:19},
    {name:'东中院',value:1000,state:0,owner:-1,pos:20},
    {name:'东下院',value:1300,state:0,owner:-1,pos:21},
    {name:'机会',value:1000,state:'surprise',owner:-1,pos:22},
    {name:'上院',value:3000,state:0,owner:-1,pos:23},
    {name:'中院',value:4000,state:0,owner:-1,pos:24},
    {name:'巴士站1',value:1000,state:'airport',owner:-1,pos:25},
    {name:'交所得税',value:1000,state:'badEvent',owner:-1,pos:26},
    {name:'命运',value:1000,state:'surprise',owner:-1,pos:27},
    {name:'电信学院',value:1600,state:0,owner:-1,pos:28},
    {name:'软院机房',value:0,state:'jail',owner:-1,pos:29},
    {name:'船建学院',value:2400,state:0,owner:-1,pos:17},
    {name:'机动学院',value:1800,state:0,owner:-1,pos:15},
    {name:'材料学院',value:20000,state:0,owner:-1,pos:13},
    {name:'赌场',value:1000,state:'casino',owner:-1,pos:11},
    {name:'机会',value:1000,state:'surprise',owner:-1,pos:10},
    {name:'捡到钱',value:1000,state:'goodEvent',owner:-1,pos:9},
    {name:'生医工学院',value:2000,state:0,owner:-1,pos:8},
    {name:'航天学院',value:2200,state:0,owner:-1,pos:7},
    {name:'数学学院',value:2400,state:0,owner:-1,pos:6},
    {name:'物理学院',value:4500,state:0,owner:-1,pos:5},
    {name:'化学学院',value:3000,state:0,owner:-1,pos:4},
    {name:'巴士站2',value:1000,state:'airport',owner:-1,pos:3},
    {name:'致远学院',value:3600,state:0,owner:-1,pos:2},
    {name:'命运',value:1000,state:'surprise',owner:-1,pos:1},
    {name:'思源湖',value:1000,state:'trip',owner:-1,pos:0},
    {name:'药学院',value:3400,state:0,owner:-1,pos:12},
    {name:'法学院',value:3200,state:0,owner:-1,pos:14},
    {name:'人文学院',value:2800,state:0,owner:-1,pos:16}
];
const PLAYER = [
    {name:'Player1',avatar:ava1,money:10000,pos:0,color:'rgb(18, 18, 18)'},
    {name:'Player2',avatar:ava2,money:10000,pos:0,color:'rgb(39, 77, 122)'},
    {name:'Player3',avatar:ava3,money:10000,pos:0,color:'rgb(95, 174, 46)'},
    {name:'Player4',avatar:ava4,money:10000,pos:0,color:'rgb(250, 42, 20)'}
]

function App() {
    return (
        ReactDOM.render(
            React.createElement(Map, {
                mapInfo: LATTICE,
                playerInfo: PLAYER
            })
            ,document.getElementById("root")
        )
    )
}

export default App;
